/*
 * @Description: 护肤品商品详情
 * @Author: kanglin
 * @Date: 2018-09-19 10:24:36
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
	@deep: ~'>>>';
    .v-com-product-detail{
        position: relative;
        width: 1160px;
		padding: 4px 4px 0 4px;
        .image{
            display: inline-block;
            width:400px;
            height:400px;
            border:1px solid #EFEFEF;
            opacity:1;
            background-position: center;
            background-size: cover;
        }
        .info{
			position: relative;
            display: inline-block;
            margin-left: 40px;
			vertical-align: top;
			height: 400px;
        }

        .info__title{
			width: 664px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
            font-size:18px;
            line-height:32px;
            color:#333333;
			margin-top: 10px;
        }
        .info__desc {
            height:16px;
            font-size:12px;
            font-weight:400;
            line-height:16px;
            color:#333333;
            margin-top: 10px;
        }

        .info__tag{
			margin-top: 48px;
        }

        .info__tag__label{
            display: inline-block;
            height:36px;
            font-size:16px;
            font-weight:400;
            line-height:36px;
            color:#333333;
        }

        .info__tag__list{
            display: inline-block;
			width: 580px;
			vertical-align: top;
			max-height: 80px;
			overflow: auto;
        }

        .info__tag__list__item{
			padding: 0 22px;
			display: inline-block;
            line-height: 34px;
            height:34px;
            background: #eafbff;
            color: #4BABC2;
            border-radius:16px;
			font-size: 14px;
			margin-right: 20px;
			margin-bottom: 10px;
        }

        .info__attribute{
            margin-bottom: 10px;
            height:22px;
            line-height:22px;
            font-size:16px;
            font-weight:400;
            color:#333333;
        }

        .info__price{
            padding-top: 10px;
            vertical-align: baseline;
            height:32px;
            font-size:16px;
            font-weight:400;
            line-height:32px;
            color:#333333;
            &>b{
				font-size:24px;
				font-weight:400;
            }
		}
		.info__count-and-btn {
			position: absolute;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.info__count{
				height:24px;
				font-size:18px;
				font-weight:400;
				line-height:24px;
				color:#333333;
			}
			.info__add{
				.detail-btn {
					width:180px;
					height:45px;
					line-height: 45px;
					text-align: center;
					color: #fff;
					font-size: 18px;
					background:rgba(45,140,240,1);
					border-radius:23px;
					opacity:1;
					cursor: pointer;
				}
			}


		}
		.brand-form {
			padding-top: 40px;
			// background: red;
			@{deep} .ivu-form-item-label{
				text-align: left;
			}
			@{deep} .ivu-select-selection{
				width: 150px;
			}
			@{deep} .ivu-icon-help-circled{
				line-height: 32px;
			}

		}
	}


</style>

<template>
	<div class="v-com-product-detail">
		<div
			:style="getImageStyle"
			class="image"/>
		<div class="info">
			<h3
				:title="getTitle"
				class="info__title">
				{{ getTitle }}
			</h3>

			<small class="info__desc">
				{{ getSubtitle }}
			</small>

			<div class="info__tag">
				<span class="info__tag__label">
					{{ $t('share_product.product_tag') + $t('common.colon') }}
				</span>
				<div class="info__tag__list no-scrollbar">
					<span
						v-for="(item, index) in getTags"
						:key="index"
						class="info__tag__list__item">
						{{ item }}
					</span>
				</div>
			</div>

			<p class="info__attribute">
				{{ $t('share_product.adapt_people') + $t('common.colon') + getPeople }}
			</p>

			<p class="info__attribute">
				{{ $t('share_product.adapt_position') + $t('common.colon') + getPosition }}
			</p>


			<p class="info__price">
				{{ $t('share_product.sell_price') + $t('common.colon') }}<b>￥{{ getPrice }}</b>
			</p>

			<!-- BEGIN: 表单 -->
			<Form
				:model="form"
				:label-width="40"
				class="brand-form"
				inline>
				<FormItem :label="$t('product.brand')">
					<Select
						v-model="form.brand_id">
						<OptionGroup
							v-if="canAddNewBrnad"
							:label="$t('common.create')">
							<Option :value="0">{{ getBrandName }}</Option>
						</OptionGroup>
						<OptionGroup
							:label="$t('product.existing_brand')">
							<Option
								v-for="item in getCustomerBrands"
								:value="item.id"
								:key="item.id">{{ item.name }}</Option>
						</OptionGroup>
					</Select>
				</FormItem>
				<Tooltip
					placement="right">
					<div slot="content">
						<p v-html="$t('share_product.add_new_brand_tips')"/>
						<p v-html="$t('share_product.add_existing_brand_tips')"/>
					</div>
					<Icon
						:size="24"
						color="#2f8def"
						type="help-circled"/>
				</Tooltip>
			</Form>
			<!-- END: 表单 -->

			<div class="info__count-and-btn">
				<p class="info__count">{{ $t('share_product.quote') + $t('common.colon') + getCount }}</p>

				<div class="info__add">
					<poptip
						v-if="isAdded"
						:title="$t('share_product.add_again_tip')"
						transfer
						confirm
						@on-ok="handleOk"
						@on-cancel="()=>{}">
						<div class="detail-btn">{{ $t('share_product.add_to') }}</div>
					</poptip>

					<div
						v-else
						class="detail-btn"
						@click="handleOk">{{ $t('share_product.add_to') }}</div>
				</div>
			</div>
		</div>

	</div>
</template>


<script>
export default {
	name: 'ShareProductCareProductDetail',
	props: {
		productDetail: {
			type: Object,
			default() {
				return {}; // props进来的商品详情对象
			},
		},
		customerBrands: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			form: {
				brand_id: 0,
			},
		};
	},
	computed: {
		getImageStyle() {
			return this.productDetail.thumb_url ? { backgroundImage: `url("${this.productDetail.thumb_url}")` } : {};
		},
		getCount() {
			return this.productDetail.ref_count || 0;
		},
		getPrice() {
			return this.productDetail.sell_price ? Number(this.productDetail.sell_price).toFixed(2) : 0.00;
		},
		getTitle() {
			return this.productDetail.title || this.$t('common.unknown');
		},
		getSubtitle() {
			return this.productDetail.name || this.$t('common.unknown');
		},
		getId() {
			return this.productDetail.id || '';
		},
		getTags() {
			return this.productDetail.tag_names || [];
		},
		getPeople() {
			return this.productDetail.sex_name || this.$t('common.unknown');
		},
		getPosition() {
			const positions = this.productDetail.body_position_names;
			return (positions && positions.length > 0) ? positions.join(',') : [];
		},
		isAdded() {
			const { customer_ref_count } = this.productDetail;

			return !!(customer_ref_count && customer_ref_count > 0);
		},
		getBrandName() {
			return this.productDetail.brand_name;
		},
		canAddNewBrnad() { // 客户品牌列表没有当前供应商的品牌时 可以新增
			const brand = this.findBrand(this.getCustomerBrands, this.productDetail.brand_name);
			return !brand && this.getBrandName;
		},
		getCustomerBrands() {
			return this.customerBrands;
		},
	},
	watch: {
		'productDetail.brand_name': function handleBrandChange() {
			const brand = this.findBrand(this.getCustomerBrands, this.productDetail.brand_name);
			if (brand) {
				this.form.brand_id = brand.id; // 存在品牌
			} else {
				this.form.brand_id = 0;
			}
		},
	},
	methods: {
		handleOk() {
			const form = { product_id: this.getId };
			if (this.form.brand_id) {
				Object.assign(form, { brand_id: this.form.brand_id });
			}
			this.$emit('add', form);
		},

		/**
		 * 使用供应商品牌名字查找品牌
		 */
		findBrand(brands, brand_name) {
			const [brand] = brands.filter(item => item.name === brand_name);
			return brand;
		},
	},
};
</script>

